<template>
  <div>
    <a-tabs default-active-key="1" @change="callback" size="large">
      <a-tab-pane key="1" tab="投递职位">
        <div style="overflow: hidden; hegiht: auto">
          <div>
            <ul class="workList">
              <li
                v-for="(item,index) in deliveryList"
                :key="index"
              >
                <p @click="$router.push('/employment/positionDetail?jobCode='+item.jobCode)" class="workTitle">{{item.name}}</p>
                <div class="msg" @click="$router.push('/employment/positionDetail?jobCode='+item.jobCode)">
                  <div class="welfare">
                    <div class="navs">
                      <p class="maney" v-show="item.payType == 1">{{item.minPay}}<span v-show="item.minPay && item.maxPay">K-</span>{{item.maxPay}}<span v-show="item.minPay && item.maxPay">K</span>/月</p>
                      <p class="maney" v-show="item.payType == 2">{{item.maxPay }}元/日</p>
                      <p class="maney" v-show="item.payType == 3">面议</p>
                      <div class="nav">
                        <p>{{item.degree}}</p>
                        <p class="line" v-show="item.degree">|</p>
                        <p>{{item.workExper}}</p>
                        <p class="line" v-show="item.workExper">|</p>
                        <p>{{item.disaType}}</p>
                      </div>
                    </div>
                    <div class="treatment">
                      <p v-for="(i,j) in item.labelList" :key="j">{{i.name}}</p>
                    </div>
                  </div>
                  <div class="company" v-if="item.comCode">
                    <img
                      :src="imageWebUrl + item.comLogo"
                      @error="$event.target.src = GLOBAL.defaultIconImg"
                      alt=""
                      class="worklogo"
                    />
                    <div class="synopsis">
                      <p class="companyname">{{item.comName}}</p>
                      <p class="synop">{{item.comNature}} <span v-if="item.comNature">|</span> {{item.comTrade}} <span v-if="item.comTrade">|</span> {{item.scale}}</p>
                    </div>
                  </div>
                </div>
                <div class="links" v-show="item.couseList || item.webName">
                  <p v-show="item.couseList">相关课程：<span v-for="(i,j) in item.couseList" :key="j"  @click="getJumpVideo(i)">{{i.name}}</span></p>
                  <p v-show="item.webName">
                    相关政策：<span
                      ><span v-show="item.policies == 2">{{item.webName}}</span><a :href="item.webUrl" target="_blank" v-show="item.policies == 1">{{item.webName}}</a></span
                    >
                  </p>
                </div>
              </li>
              <a-empty
                  :image="imgUrl"
                  :image-style="{
                  height: '220px',
                  }"
                  style="margin: 0 auto; margin-top: 88px"
                  v-if="deliveryList.length < 1 && type == 1 && flag"
              />
            </ul>
          </div>
          <!-- 分页器 -->
        </div>
        <div>
          <a-pagination
            style="text-align: center; margin-top: 30px"
            v-model="current"
            :total="total"
            :hideOnSinglePage="true"
            :pageSize="pageSize"
            @change="changePagin"
            show-less-items
          />
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="项目咨询">
        <div style="overflow: hidden">
          <div
            class="listDiv"
            @click="$router.push('/employment/projectDetail?id='+item.itemNo)"
            v-for="(item,index) in userItemList"
            :key="index"
          >
            <div class="dlex3-div" v-if="item">
              <div class="image1">
                <img src="" alt="" />
              </div>
              <div style="width:678px">
                <span class="titleTxt1" style="font-weight: 600">
                  {{item.itemName}}
                </span>
                <div style="margin-top: 16px" v-if="item.labelList">
                  <span class="squareLabel" v-for="(i,j) in item.labelList" :key="j" style="margin-right: 15px">{{i}}</span>
                </div>
                <div style="margin-top: 16px">

                  <span class="smallPrint" ><span style="color: #333333"
                    >项目特点：</span>
                    {{item.itemTrait}}
                  </span>
                </div>
              </div>
            </div>
            <div class="dlex2-div dloDiv" v-if="item">
              <div class="cOicon-id" style="flex: 1">
                <img
                  v-show="item.contacts"
                  class="imgagesFour"
                  src="@/assets/image/employment/name.png"
                  alt=""
                />
                <p style="font-size: 13px; margin-left: 8px">{{item.contacts}}</p>
                <img
                  v-show="item.phone"
                  class="imgagesFour"
                  style="margin-left: 32px"
                  src="@/assets/image/employment/phone.png"
                  alt=""
                />
                <p style="font-size: 13px; margin-left: 8px">{{item.phone.substring(0,3)}}-{{item.phone.substring(3,7)}}-{{item.phone.substring(7,11)}}</p>
                <img
                  v-show="item.otherContact"
                  class="imgagesFour"
                  style="margin-left: 32px"
                  src="@/assets/image/employment/weixin.png"
                  alt=""
                />
                <p style="font-size: 13px; margin-left: 8px">{{item.otherContact}}</p>
              </div>
            </div>
          </div>
          <a-empty
              :image="imgUrl"
              :image-style="{
              height: '220px',
              }"
              style="margin: 0 auto; margin-top: 88px"
              v-if="userItemList.length < 1  && flag"
          />
          <!-- 分页器 -->
          <a-pagination
            style="text-align: center; margin-top: 30px"
            v-model="current"
            :total="total"
            :hideOnSinglePage="true"
            :pageSize="pageSize"
            @change="changePagin"
            show-less-items
          />
        </div>
      </a-tab-pane>
    </a-tabs>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>



<script>
export default {
  data() {
    return {
      imgUrl: require("@/assets/image/pagint.png"),
      current: 1,
      type:1,
      userNo:"user01",
      deliveryList:[],
      userItemList:[],
      total:0,
      pageSize:3,
      pageIndex:1,
      flag:false,
      onLoading:false
    };
  },
  mounted(){
    this.getdeliveryList();//  一项目咨询列表
  },
  methods: {
    // 跳转视频播放页
    getJumpVideo(e) {
      this.$router.push(
        "/video/detailsVideo?courseNo=" +
          e.courseNo +
          "&learnedTime=" +
          e.learnedTime
      );
    },
    callback(key) {
      this.flag = false;
      this.total = 0;
      this.type = key;
      this.pageIndex = 1;
      if(key == 1){
        this.getdeliveryList();
      }else{
        this.getuserItemList();
      }
    },
    // 分页
    changePagin(e){
      this.pageIndex = e;
      this.getdeliveryList();
      this.getuserItemList();
    },
    // 获取已投递职位列表
    getdeliveryList(){
      this.onLoading = true
      this.$ajax({
        url:"/entrepreneurial/resumedelivery/user/delivery/List?userNo="+this.userNo+"&pageSize="+this.pageSize+"&pageIndex="+this.pageIndex,
        method:"post"
      }).then((res)=>{
        this.flag = true;
        if(res.code == 200){
          this.onLoading = false
          this.deliveryList = res.data.list;
          this.total = res.data.totalCount;
        }else{
          this.onLoading = false
        }
      })
    },
    // 获取项目咨询列表
    getuserItemList(){
      this.$ajax({
        url:"/user/useritem/list?pageSize="+this.pageSize+"&pageIndex="+this.pageIndex,
        method:"post"
      }).then((res)=>{
        this.flag = true;
        if(res.code == 200){
          this.userItemList = res.data.list;
          this.total = res.data.totalCount;
        }
      })
    }
  },
};
</script>


<style lang="less" scoped>
.smallPrint{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.workList {
  li {
    width: 800px;
    height: 206px;
    padding: 30px 20px 15px;
    margin-bottom: 16px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
    .workTitle {
      color: #333333;
      font-size: 18px;
      line-height: 25px;
      font-weight: bold;
      cursor: pointer;
    }
    .msg {
      cursor: pointer;
      margin-top: 16px;
      display: flex;
      padding-bottom: 21px;
      border-bottom: 1px solid #eeeeee;
      .welfare {
        width: 483px;
        .navs {
          height: 25px;
          display: flex;
          align-items: center;
          .maney {
            color: #FFBE37;
            font-size: 18px;
            line-height: 25px;
          }
          .nav {
            display: flex;
            margin-left: 24px;
            p {
              color: #666666;
              font-size: 12px;
              line-height: 17px;
            }
            .line {
              margin: 0 20px;
            }
          }
        }
        .treatment {
          display: flex;
          margin-top: 16px;
          p {
            padding: 0 15px;
            color: #FFBE37;
            font-size: 12px;
            line-height: 22px;
            text-align: center;
            // background: #FFE9D9;
            // border-radius: 2px;
            border: 1px solid #FFBE37;
            margin-right: 16px;
            // cursor: pointer;
          }
        }
      }
      .company {
        flex: 1;
        display: flex;
        .worklogo {
          width: 60px;
          height: 50px;
        }
        .synopsis {
          margin-left: 19px;
          padding-top: 3px;
          .companyname {
            color: #000000;
            font-size: 13px;
            line-height: 18px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .synop {
            margin-top: 10px;
            color: #999999;
            font-size: 12px;
            line-height: 17px;
          }
        }
      }
    }
    .links {
      display: flex;
      margin-top: 16px;
      p {
        margin-right: 40px;
        color: #333333;
        font-size: 12px;
        line-height: 17px;
        span {
          display: inline-block;
          margin-left: 8px;
          color: #0d4fae;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }
}
.listDiv {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  float: left;
  margin-bottom: 24px;
  cursor: pointer;
  padding: 12px;
  padding-right: 24px;
  margin-left: 1px;
  -moz-transition: all ease 1s;
  -o-transition: all ease 1s;
  transition: all ease 1s;
  .image1 {
    width: 174px;
    height: 120px;
    margin-right: 32px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .dloDiv {
    width: 847px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: #eeeeee solid 1px;
  }
}
/deep/.ant-tabs-nav .ant-tabs-tab-active {
  color: #333333;
  text-shadow: 0 0 0.25px currentColor;
  font-weight: 600;
}
/deep/.ant-pagination-item-active a {
  color: #333333;
  background-color: #FFBE37;
}
</style>

